<template>
  <div class="article-list">
    <div class="show-log" v-if="signShow">
      <img src="@/assets/noContract.png" alt="" />
      <span>暂无合同,去其它地方看看吧~</span>
    </div>
    <van-list
      v-else
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <div class="big-box" v-for="(item, index) in list" :key="index">
        <div class="up-box">
          <div>
            发件方: <span>{{ item.sponsorName }}</span>
          </div>
          <div>《{{ item.title }}》</div>
        </div>
        <div class="up-end">
          <div>
            签约方:<span>{{ item.signatoryName }}</span
            >等
          </div>
          <div>
            发起时间 <span>{{ item.startDate }}</span>
          </div>
        </div>
        <van-button
          v-if="channel === 0"
          class="btn-right"
          type="info"
          round
          @click="examine(item)"
          >查看</van-button
        ><van-button
          v-if="channel === 1"
          class="btn-right"
          type="info"
          round
          @click="
            $router.push({
              name: 'approve',
              params: { contract: item }
            })
          "
          >审批</van-button
        ><van-button
          v-if="channel === 2"
          class="btn-right"
          type="info"
          round
          @click="$toast('功能未开放')"
          >分享</van-button
        ><van-button
          v-if="channel === 3"
          class="btn-right"
          type="info"
          round
          @click="
            $router.push({
              name: 'look-over',
              params: { contractId: item.contractId }
            })
          "
        >
          完成</van-button
        >
      </div>
    </van-list>
  </div>
</template>

<script>
import {
  addContractSign,
  addContractExamine,
  addContractOperation,
  addContractSuccess,
  addContractType
} from '@/api/contract'
export default {
  data() {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      error: false, // 控制列表加载失败的提示状态
      signContract: {
        // 证件号
        idNumber: '',
        // 页数
        pageNumber: 1,
        // 每页大小
        pageSize: 5
      },
      total: 0,
      signShow: false
    }
  },
  props: {
    channel: {
      type: Number,
      required: true,
      default: 0
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 初始化或滚动到底部的时候会触发调用 onLoad
    async onLoad() {
      this.signContract.idNumber = this.$store.state.userName.idNumber
      try {
        if (this.channel === 0) {
          await addContractSign(this.signContract).then(res => {
            if (res.data.code !== '0') {
              return (this.signShow = true)
            }
            if (res.data.data.records.length <= 0) {
              this.signShow = true
            }
            res.data.data.records.map(item => {
              item.startDate = item.startDate.split(' ')[0]
              item.signatoryName = item.signatoryName
                .split(',')
                .slice(0, 2)
                .toString()
            })
            this.list.push(...res.data.data.records)
            this.total = res.data.data.total
            // 设置本次加载中 loading 状态结束
            this.loading = false
            // 判断数据是否加载结束
            if (this.list.length >= this.total) {
              this.finished = true
            }
          })
        } else if (this.channel === 1) {
          await addContractExamine(this.signContract).then(res => {
            if (res.data.code !== '0') {
              return (this.signShow = true)
            }
            if (res.data.data.records.length <= 0) {
              this.signShow = true
            }
            res.data.data.records.map(item => {
              item.startDate = item.startDate.split(' ')[0]
              item.signatoryName = item.signatoryName
                .split(',')
                .slice(0, 2)
                .toString()
            })
            this.list.push(...res.data.data.records)
            this.total = res.data.data.total

            // 设置本次加载中 loading 状态结束
            this.loading = false
            // 判断数据是否加载结束
            if (this.list.length >= this.total) {
              this.finished = true
            }
          })
        } else if (this.channel === 2) {
          await addContractOperation(this.signContract).then(res => {
            if (res.data.code !== '0') {
              return (this.signShow = true)
            }
            if (res.data.data.records.length <= 0) {
              this.signShow = true
            }
            res.data.data.records.map(item => {
              item.startDate = item.startDate.split(' ')[0]
              item.signatoryName = item.signatoryName
                .split(',')
                .slice(0, 2)
                .toString()
            })
            this.list.push(...res.data.data.records)
            this.total = res.data.data.total

            // 设置本次加载中 loading 状态结束
            this.loading = false
            // 判断数据是否加载结束
            if (this.list.length >= this.total) {
              this.finished = true
            }
          })
        } else if (this.channel === 3) {
          await addContractSuccess(this.signContract).then(res => {
            if (res.data.code !== '0') {
              return (this.signShow = true)
            }
            if (res.data.data.records.length <= 0) {
              this.signShow = true
            }
            res.data.data.records.map(item => {
              item.startDate = item.startDate.split(' ')[0]
              item.signatoryName = item.signatoryName
                .split(',')
                .slice(0, 2)
                .toString()
            })
            this.list.push(...res.data.data.records)
            this.total = res.data.data.total

            // 设置本次加载中 loading 状态结束
            this.loading = false
            // 判断数据是否加载结束
            if (this.list.length >= this.total) {
              this.finished = true
            }
          })
        }
      } catch (error) {
        this.loading = false // 关闭 loading 效果
        this.error = true // 开启错误提示
      }
      this.signContract.pageNumber++
    },
    //
    async examine(item) {
      try {
        addContractType({ contractId: item.contractId }).then(res => {
          if (res.data.code !== '0') {
            return this.$toast.fail('失败!')
          }
          if (res.data.data.coordsCount === 0) {
            console.log('拖拽')
            this.$router.push({
              name: 'sth',
              params: {
                contractId: item.contractId
              }
            })
          } else {
            console.log('固定')
            this.$router.push({
              name: 'sth-fixed',
              params: {
                contractId: item.contractId
              }
            })
          }
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.article-list {
  height: 73vh;
  overflow-y: auto;
  // 内容
  .big-box {
    width: 670px;
    height: 237px;
    position: relative;
    margin: 20px 40px;
    padding: 0 32px;
    box-sizing: border-box;
    background-color: #fff;
    .up-box {
      height: 175px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      div:nth-child(1) {
        font-size: 24px;
        color: #7d7d7d;
        margin-bottom: 20px;
        span {
          margin-left: 8px;
        }
      }
      div:nth-child(2) {
        font-size: 30px;
        color: #101010;
      }
    }
    .up-end {
      height: 62px;
      border-top: 1px solid #e4e4e4;
      font-size: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #9a9a9a;
      div:nth-child(1) {
        span {
          margin: 0 8px;
        }
      }
      div:nth-child(2) {
        span {
          margin-left: 8px;
        }
      }
    }
    .btn-right {
      position: absolute;
      width: 120px;
      height: 52px;
      top: 93px;
      right: 32px;
      font-size: 26px;
    }
  }
  .show-log {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #9c9c9c;
    img {
      width: 241px;
      height: 281px;
      margin-bottom: 32px;
    }
  }
}
</style>
